<script setup>
import { storeToRefs } from 'pinia';
import { toRefs } from 'vue';

import useStore from './store'
const { counter, user } = useStore()

// 解构使用不是响应式
// const { count } = counter

// 方法1. 使用 toRefs,建议
const { count } = toRefs(counter)
// 方法2
// const { count } = storeToRefs(counter)


</script>

<template>
    <h1>{{ counter }}</h1>
    <!-- 不需要 .state.count -->
    <!-- 不需要 .getters.double -->
    <h1>{{ counter.count }}</h1>
    <h1>{{ counter.double }}</h1>
    <button @click="counter.add">点我+1</button>
    <button @click="counter.addAsync">异步+1</button>

    <hr>

    <div>解构的：{{ count }}</div>
</template>
